<template>
  <view class="container">
    <swiper class="swiper-container" :autoplay="true" :interval="3000" :duration="500" :circular="true" indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#ffffff">
      <swiper-item v-for="(slide, index) in slides" :key="index">
        <image :src="slide" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>
    <view class="search-bar" @click="navigateToSearch">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <text class="search-placeholder">搜索商品</text>
      </view>
    </view>
    <view class="categories">
      <view class="category-item" v-for="(item, index) in categories" :key="index" @click="navigateToCategory(item)">
        <view class="category-content">
          <image :src="item.image" mode="aspectFill" class="category-image"></image>
          <view class="category-text">
            <text class="category-title">{{ item.title }}</text>
            <text class="category-subtitle">{{ item.subtitle }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 热门商品区域 -->
    <view class="hot-products">
      <view class="section-title">热门商品</view>
      <view class="products-grid">
        <view class="product-item" v-for="(product, index) in hotProducts" :key="index" @click="navigateToProduct(product)">
          <image :src="product.image" mode="aspectFill" class="product-image"></image>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-price">¥{{ product.price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        '/static/images/4.png',
        '/static/images/5.png',
        '/static/images/6.png',
      ],
      categories: [
        { title: '水果', subtitle: '精选新鲜水果', image: '/static/images/4.png' },
        { title: '蔬菜', subtitle: '新鲜蔬菜直供', image: '/static/images/5.png' },
        { title: '调味', subtitle: '调味和干货', image: '/static/images/6.png' },
        { title: '粮油', subtitle: '纯正鲜榨菜籽油', image: '/static/images/7.png' },
        { title: '肉蛋', subtitle: '新鲜肉蛋奶', image: '/static/images/4.png' },
        { title: '手工艺', subtitle: '手工艺品', image: '/static/images/4.png' },
        { title: '奶制品', subtitle: '纯正牛奶', image: '/static/images/4.png' },
        { title: '药材', subtitle: '精选中药材', image: '/static/images/4.png' },
        { title: '加工品', subtitle: '农产品加工', image: '/static/images/4.png' }
      ],
      hotProducts: [
        {
          id: 1,
          name: '新鲜红富士苹果',
          price: 29.9,
          image: '/static/images/4.png',
          description: '精选红富士苹果，甜脆可口',
          category: 'fruit'
        },
        {
          id: 2,
          name: '有机生菜',
          price: 8.8,
          image: '/static/images/5.png',
          description: '无农药生菜，新鲜采摘',
          category: 'vegetable'
        },
        {
          id: 3,
          name: '农家菜籽油',
          price: 68,
          image: '/static/images/6.png',
          description: '纯天然压榨菜籽油',
          category: 'oil'
        },
        {
          id: 4,
          name: '土鸡蛋',
          price: 45,
          image: '/static/images/7.png',
          description: '散养土鸡蛋，30枚',
          category: 'meat'
        }
      ]
    };
  },
  methods: {
    navigateToCategory(item) {
      const categoryMap = {
        '水果': 'fruit',
        '蔬菜': 'vegetable',
        '调味': 'seasoning',
        '粮油': 'oil',
        '肉蛋': 'meat',
        '手工艺': 'handicraft',
        '奶制品': 'dairy',
        '药材': 'medicine',
        '加工品': 'processed'
      };
      
      const category = categoryMap[item.title];
      if (category) {
        // 跳转到商品列表页
        uni.navigateTo({
          url: `/pages/spxq/list?category=${category}`,
          fail: (err) => {
            console.error('跳转失败：', err);
            uni.showToast({
              title: '跳转失败，请重试',
              icon: 'none'
            });
          }
        });
      }
    },
    navigateToProduct(product) {
      try {
        // 跳转到商品详情页，传递商品信息
        const productInfo = {
          id: product.id,
          name: product.name,
          price: product.price,
          image: product.image,
          description: product.description,
          category: product.category
        };
        
        uni.navigateTo({
          url: `/pages/spxq/detail?productInfo=${encodeURIComponent(JSON.stringify(productInfo))}`,
          fail: (err) => {
            console.error('跳转失败：', err);
            uni.showToast({
              title: '跳转失败，请重试',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('跳转错误：', error);
        uni.showToast({
          title: '系统错误，请重试',
          icon: 'none'
        });
      }
    },
    navigateToSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.swiper-container {
  width: 100%;
  height: 350rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f0fff0;
  height: 70rpx;
  border-radius: 35rpx;
  padding: 0 30rpx;
}

.search-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.search-placeholder {
  font-size: 28rpx;
  color: #999;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10rpx;
  margin-bottom: 30rpx;
}

.category-item {
  width: 30%;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.category-item:active {
  transform: scale(0.98);
}

.category-content {
  padding: 20rpx;
}

.category-image {
  width: 100%;
  height: 150rpx;
  border-radius: 15rpx;
  margin-bottom: 10rpx;
}

.category-text {
  text-align: center;
}

.category-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.category-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-top: 5rpx;
}

/* 热门商品样式 */
.hot-products {
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 8rpx solid #4CAF50;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.product-info {
  padding: 15rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: bold;
}
</style>